<style media="screen">
  .head-container {
    position: relative;
    padding: 10px 0px 14px;
    border-bottom: 1px solid #E3E3E5;
  }

  .head-container .mes {
    overflow: hidden;
    margin-right: 10px;
    float: left;
  }

  .head-container .mes p {
    font-size: 12px;
    color: #CFCFCF;
    margin-bottom: 6px;
  }

  .head-container .mes input {
    width: 200px;
    height: 34px;
  }

  .head-container .flow {
    float: left;
    margin-right: 10px;
  }

  .head-container .flow p {
    font-size: 12px;
    color: #CFCFCF;
    margin-bottom: 6px;
  }

  .head-container .flow .flow-select {
    width: 140px;
    height: 34px;
  }

  .head-container .button-group {
    padding-top: 22px;
  }

  .calendar_container {
    width: 140px;
  }
</style>

<section id="contract-list" class="pl-24 pr-24">
  <hl-page-header title="访客单管理">    
    <hl-button type="outline" @on-click="createyx" v-if="permissions.indexOf('c355') > -1">新建访客单</hl-button>
  </hl-page-header>

  <div class="head-container clearfix">
    <div class="clearfix">
      <div class="mes">
        <p>信息检索</p>
        <div class="global_search">
          <span class="icon-Gm-search"></span>
          <input :value="keyword" v-model="keyword" autocomplete="off" type="text" class="global_ipt_text" placeholder="客户名称/访客单号"  />
        </div>
      </div>
      <div class="flow">
        <p>访客单类型</p>
        <div >
          <hl-select width="140" type="default" :data="visitorTypeList" v-model="selectVisitorType"></hl-select>
        </div>
      </div>
			<div class="flow">
			  <p>渠道分类</p>
			  <div >
			    <hl-select width="140" type="default" :data="channelTypeData" v-model="selectChannelType" @on-change="getChannelNameData"></hl-select>
			  </div>
			</div>
			<div class="flow">
			  <p>渠道名称</p>
			  <div >
			    <hl-select width="140" type="default" :data="channelNameData" v-model="selectChannelName"></hl-select>
			  </div>
			</div>
			<div class="flow" v-show="isExtenseFlag">
			  <p>所属行业</p>
			  <div >
			    <hl-select width="140" type="default" :data="industryData" v-model="selectIndustry"></hl-select>
			  </div>
			</div> 			
			<div class="flow" v-show="isExtenseFlag">
			  <p>面积 (m²)</p>
			  <div >
			    <hl-select width="140" type="default" :data="areageData" v-model="selectAreage"></hl-select>
			  </div>
			</div>

      <div class="button-group" v-show="!isExtenseFlag">
        <hl-button size="mini" @on-click="visitor_form_info">查询</hl-button>
        <hl-button size="mini" @on-click="resetData">重置</hl-button>
      </div>
    </div>

    <div class="mt-10 clearfix" v-show="isExtenseFlag">
      <div class="flow" >
        <p>咨询日期</p>
        <div class="dy-flex" style="align-items: center">
          <div class="calendar_container">
            <web-calendar type="default" v-model="beginTime" :afterdate="endtime" tips="起始时间"></web-calendar>
          </div>
          <span style="margin:0 10px">-</span>
          <div class="calendar_container">
            <web-calendar type="default" v-model="endtime" :beforedate="beginTime" tips="截止时间"></web-calendar>
          </div>
        </div>
      </div>
			
			<div class="flow">
			  <p>项目</p>
			  <div >
			    <hl-select width="140" type="default" :data="projectList" v-model="selectProjectId" @on-change="unitData"></hl-select>
			  </div>
			</div>
			
			<div class="flow">
			  <p>单元</p>
			  <div >
			    <hl-select width="140" type="default" :data="unitList" v-model="selectUnit"></hl-select>
			  </div>
			</div>

      <div class="button-group">
        <hl-button size="mini" @on-click="visitor_form_info">查询</hl-button>
        <hl-button size="mini" @on-click="resetData">重置</hl-button>
      </div>
    </div>

    <div class="global_open_sign" @click="openMore">
      <span v-if="!isExtenseFlag">更多筛选项</span>
      <span v-if="isExtenseFlag">收起筛选项</span>
    </div>
  </div>

  <div class="global_screening_container">
    <hl-checkbox-button :data="listMenu" v-model="selectedListMenuCode" merge @on-click="selectBillMenu"></hl-checkbox-button>
    <span class="global_refresh_icon icon-uniE94B" style="left:610px"></span>
  </div>

  <!--定宽横向滑动表格-->
  <div class="business_mange br-4 clearfix relative global_table config-table-container" style="margin:0 0 10px 0;border:1px solid #E5E5E5" >
    <div class="config-table-wrap" style="marginRight:199px;" :class="{'config-table-scroll':isScroll}" @mouseenter="showScroll" @mouseleave="hideScroll">
      <div style="width:1300px;">
        <ul class="dy-flex l-h-40 text-center global_table_title">
          <li class="dy-fx-1">序</li>
          <li class="dy-fx-3">访客单号</li>
          <li class="dy-fx-3">访客单类型</li>
          <li class="dy-fx-3">渠道分类</li>          
          <li class="dy-fx-3">渠道名称</li>
          <li class="dy-fx-3">客户名称</li>
          <li class="dy-fx-2">行业</li>
          <li class="dy-fx-3">意向项目</li>
          <li class="dy-fx-3">意向面积（㎡）</li>
					<li class="dy-fx-2">意向单元</li>
					<li class="dy-fx-2">状态</li>
        </ul>
        <div>
          <ul class="dy-flex l-h-40 text-center border-t global_table_item" v-for="(item, index) in tableData">
            <li class="dy-fx-1">{{index+1}}</li>
            <li class="dy-fx-3 ellipsis-1" :title="item.no">{{item.no}}</li>
            <li class="dy-fx-3 ellipsis-1" :title="item.typeVal">{{item.typeVal}}</li>
            <li class="dy-fx-3 ellipsis-1" :title="item.channelCategoryCodeVal">{{item.channelCategoryCodeVal}}</li>          
            <li class="dy-fx-3 ellipsis-1" :title="item.channelNameCodeVal">{{item.channelNameCodeVal || '--'}}</li>
            <li class="dy-fx-3 ellipsis-1" :title="item.customerName">{{item.customerName || '--'}}</li>
            <li class="dy-fx-2 ellipsis-1" :title="item.industryCodeVal">{{item.industryCodeVal || '--'}}</li>
            <li class="dy-fx-3 ellipsis-1" :title="item.intentProjectName">{{item.intentProjectName || '--'}}</li>
            <li class="dy-fx-3">{{item.intentAcreageCodeVal || '--'}}</li>
            <li class="dy-fx-2" :title="item.visitorFormUnitStr">
							{{item.visitorFormUnitStr || '--'}}
						</li>
            <li class="dy-fx-2">{{item.refCstmrTypeVal || '--'}}</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="border-l l-h-40 text-center config-table-operate-wrap" style="width:200px;">
      <ul>
        <li class="color-gray pl-12 pr-12 global_table_title">操作</li>
        <div>
          <li class="border-t operation pl-12 pr-12 global_table_item" v-for="(item, index) in tableData">
            <a class="mr-5" target="_blank" @click="toEdit(item)" v-if="permissions.indexOf('c356') > -1">编辑</a>    
            <a class="mr-5" target="_blank" @click="toDetail(item)">详情</a>    
          </li>
        </div>
      </ul>
    </div>
  </div>

  <div class="user-page ptb-10 clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{totalCount || '0'}}</i>条记录</span>
      <span>每页<hl-select :data="pageCounts" v-model="limit" width="80" @on-change="visitor_form_info"></hl-select>条</span>
    </div>
    <div class="pull-right">
      <hl-pagination v-model="currentPage" :total="totalPage" @change="visitor_form_info"></hl-pagination>
    </div>
  </div>
	
	<hl-button type="outline" @on-click="exportData">导出</hl-button>

</section>
<script src="modules/visitor/scripts/visitorList.js" charset="utf-8"></script>

